<template>
	<section>
		<!--高级查询栏-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="queryData">
				<el-form-item>
					<el-input v-model="queryData.keyword" placeholder="权限名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getPermission">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--表格-->
    <!--
        v-loading指加载
        @selection-change指的是多选栏
        注意：pageInfo.data中有id，只是没有显示在表格中
    -->
		<el-table :data="pageInfo.data" highlight-current-row style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
			<el-table-column type="index" width="40">
			</el-table-column>
			<el-table-column prop="name" label="权限名" width="160" sortable>
			</el-table-column>
      <el-table-column prop="url" label="资源路径" width="160" sortable>
      </el-table-column>
      <el-table-column prop="descs" label="权限描述" width="100" sortable>
      </el-table-column>
      <el-table-column prop="sn" label="sn" width="200" sortable>
      </el-table-column>
      <el-table-column prop="parent.name" label="上级权限" width="100" sortable>
      </el-table-column>
		</el-table>
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size=queryData.pageSize :total="pageInfo.total" style="float:right;">
			</el-pagination>
		</el-col>
	</section>
</template>

<script>
	export default {
		data() {
			return {
			  /* 分页查询传到后端的数据 */
        queryData: {
					keyword: '', //使用了视图与模型双向绑定，视图的值改变，模型的值也会随之改变
          pageSize: 10,
          currentPage: 1
				},
        /* 分页查询返回前端的数据 */
        pageInfo: {
          data: [],
          total: 0,
        },
				page: 1,
				sels: [],//列表选中列
			}
		},
		methods: {
      /* 改变当前页面时显示不同数据 */
      handleCurrentChange(val) {
        //val指的是当前的页数
        this.queryData.currentPage = val //点击之后更改页数，再根据修改后的页数查询所有数据
        this.getPermission();
      },

      selsChange: function (sels) {
        //sele是多选栏每一栏选中的行对象
        var ids = sels.map(x => x.id);
        this.sels = ids //将储存有数据对象的数组赋值为id
      },

      /* 获取权限数据的方法 */
      getPermission(){
        this.$http.post("/permission",this.queryData)
            .then(res => {
              res = res.data;
              if (res.success){
                //数据查询成功
                this.pageInfo = res.data
              }else {
                this.$message.error("网络异常，请联系管理员")
              }
            })
      }
    },
    mounted() {
      this.getPermission();
    }
	}

</script>

<style scoped>

</style>